<template>
  <div id="box-main">
    <div class="inform">
      <div class="top-inform-info">
        <div class="informs-class">
          <div class="inform-class">活动通知</div>
        </div>
      </div>
      <!-- 订单信息详细 -->
      <div class="main-orders-info">
        <!-- 订单内容 -->
        <div class="orders-content">本活动一切解释权归你瑞哥所有</div>
      </div>
    </div>
    <div class="box">
      <img src="../../images/222.webp" alt="" />
    </div>
    <div class="box-bottom">
      <van-button
        class="success"
        color="linear-gradient(to right, #ff6034, #ee0a24)"
        @click="showPopup"
        >开启盲盒</van-button
      >
    </div>
    <van-popup v-model="show" :close-on-click-overlay="false" closeable>
      <div class="gift">
        <div class="gift-content">价值{{ box.price }}元的{{ box.name }}</div>
      </div>
    </van-popup>
  </div>
</template>

<script>
// 调用接口
import { getBoxAPI } from "@/api";
export default {
  data() {
    return {
      show: false,
      box: {
        name: "",
        price: 0,
      },
    };
  },
  methods: {
    async showPopup() {
      this.$toast.loading({
        forbidClick: true,
        message: "抽取中...",
      });
      const box = await getBoxAPI();
      if (box.data.code == "200") {
        setTimeout(() => {
          this.box = box.data.data;
          this.show = true;
        }, 1500);
      } else {
        this.$toast.fail(box.data.message);
      }
    },
  },
};
</script>

<style>
.gift-content {
  width: 100%;
  height: 1.6rem;
  position: absolute;
  top: 6.7rem;
  font-weight: 700;
  color: #fff;
  font-size: 0.4rem;
  text-align: center;
  line-height: 1.65rem;
}
.gift {
  position: relative;
  width: 9.5rem;
  height: 11rem;
  background: url("../../images/zjl.jpg") no-repeat;
  background-size: cover;
  overflow: hidden;
}
.success {
  width: 100%;
  height: 100%;
  font-weight: 700;
}
.box-bottom {
  height: 50px;
  width: 95%;
  position: fixed;
  bottom: 60px;
  left: 2.5%;
  right: 2.5%;
  /* background-color: red; */
}
.box {
  width: 9.5rem;
  height: 8rem;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /* background-color: red; */
}
.box > img {
  width: 100%;
  height: 100%;
}
#box-main {
  position: relative;
  background: url("../../images/xk.jpg") no-repeat;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background-size: cover;
}
.order-main {
  background-color: #f6f6f9;
}
.tips-bar {
  margin-top: 45px;
}
.orders-list {
  margin-bottom: 50px;
}
.tabs {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  overflow: scroll;
}
.inform {
  width: 92%;
  min-height: 80px;
  background-color: skyblue;
  margin: 20px auto 10px auto;
  padding: 5px;
  border-radius: 8px;
}
.inform .top-inform-info {
  width: 100%;
  height: 30px;
  position: relative;
}
.inform .top-inform-info .user-portrait {
  width: 30px;
  height: 30px;
  float: left;
}
.inform .top-inform-info .user-portrait img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  margin-left: 5px;
}
.inform .top-inform-info .informs-class {
  width: 50%;
  height: 100%;
  margin-top: 1px;
  float: left;
  margin-left: 15px;
}
.inform-class {
  width: 100%;
  height: 18px;
  float: left;
  font-size: 16px;
  font-weight: 700;
}
.informs-class span {
  float: left;
  font-size: 10px;
  color: #989898;
}
.orders-state {
  width: 60px;
  height: 20px;
  background-color: #eefaf7;
  color: #4bc492;
  font-size: 10px;
  text-align: center;
  line-height: 20px;
  border-radius: 3px;
  position: absolute;
  top: 50%;
  right: 5px;
  margin-top: -11px;
}
.main-orders-info {
  width: 100%;
  min-height: 10px;
  text-align: center;
  box-sizing: border-box;
}
.main-orders-info > .orders-content {
  font-size: 20px;
  padding: 5px 5px 5px 0;
}
.place-start {
  font-size: 8px;
  color: #9c9c9c;
  margin-bottom: 5px;
  font-family: serif;
}
.place-end {
  font-size: 8px;
  color: #5572d4;
  font-family: serif;
}
.bottom-orders-info {
  width: 100%;
  height: 30px;
}
</style>